<template>
	<view>
		<view class="tbar"></view>
		<view class="p-r-30 w-1">
			<view class="w-1 bb-solid fr-s-c" style="height: 96rpx;">
				<text class="c-33 fs-28 bold" style="width: 144rpx;">姓名</text>
				<input type="text" v-model="name" class="fs-28 flex-1" placeholder="请输入姓名" />
			</view>
			<view class="w-1 bb-solid fr-s-c" style="height: 96rpx;">
				<text class="c-33 fs-28 bold" style="width: 144rpx;">联系电话</text>
				<view class="qubox fr-c">
					<text class="m-r-10 fs-28">+86</text>
					<up-icon name="arrow-down-fill" size="20rpx"></up-icon>
				</view>
				<input type="number" v-model="tel" class="fs-28 flex-1 m-l-20" placeholder="请输入手机号" />
			</view>
			<!-- @click="show=true" -->
			<picker mode="region" class="w-1" @change="changeRegion">
				<view class="w-1 relative bb-solid fr-s-c" style="height: 96rpx;">
					<text class="c-33 fs-28 bold" style="width: 144rpx;">所在地区</text>
					<input type="text" :value="(residevice+residecity+residedist)" class="fs-28 flex-1"
						placeholder="省、市、区" />
					<!-- <up-icon name="map-fill" size="30rpx" color="#00923F"></up-icon> -->
					<up-icon name="arrow-down-fill"></up-icon>
					<view class="w-1 absolute-0 w-1 h-1" style="z-index: 2;"></view>
				</view>
			</picker>
			<view class="w-1 bb-solid fr-s-c relative" @click="choose" style="min-height: 96rpx;">
				<text class="c-33 fs-28 bold" style="width: 144rpx;">所在位置</text>
				<!-- <input type="text" v-model="location.address" class="fs-28 flex-1" placeholder="请选择" /> -->
				<text class="fs-28 flex-1 c-77" v-if="!location">请选择</text>
				<text class="fs-28 flex-1 text-line-2" v-else>{{location.address}}</text>
				
				<up-icon name="arrow-down-fill"></up-icon>
				<!-- <view class="w-1 absolute-0 w-1 h-1" style="z-index: 2;"></view> -->
			</view>
			<view class="w-1 bb-solid fr-s-c" style="height: 96rpx;">
				<text class="c-33 fs-28 bold" style="width: 144rpx;">详细地址</text>
				<input type="text" v-model="address" class="fs-28 flex-1" placeholder="请填写具体地址" />
			</view>
			<view class="w-1">
				<view class="fr-s-c m-t-25" @click="deadress=deadress==1?0:1">
					<image v-if="deadress==1" style="width: 40rpx; height: 40rpx;" src="/static/images/login/y.png"
						mode=""></image>
					<image v-else style="width: 40rpx; height: 40rpx;" src="/static/images/tab2/pn.png" mode=""></image>
					<text class="c-00 fs-26 bold m-l-10">设置为默认地址</text>
				</view>
			</view>

			<view class="fr-c big-btn m-t-50" @click="sub">立即保存</view>
		</view>
		<!-- <city-select v-model="show" @city-change="cityChange"></city-select> -->
	</view>
</template>

<script setup>
	// import citySelect from '@/components/u-city-select.vue';
	const show = ref(false)

	const tel = ref('');
	const name = ref('');
	const residevice = ref('');
	const residecity = ref('');
	const residedist = ref('');
	const address = ref('');
	const deadress = ref(0);

	const id = ref(0)
	onLoad(o => {
		console.log(JSON.parse(o.info))
		let info = JSON.parse(o.info)
		tel.value = info.tel;
		name.value = info.name;
		residevice.value = info.residevice;
		residecity.value = info.residecity;
		residedist.value = info.residedist;
		address.value = info.address;
		deadress.value = info.is_defult;
		id.value = info.id
		if(info.jwdaddress){
			location.value = {
				address:info.jwdaddress,
				longitude:info.lng,
				latitude:info.lat
			}
		}
		
	})


	const caddress = ref('')
	const location = ref('')

	function choose() {
		uni.chooseLocation({
			success: (res) => {
				console.log(res)
				location.value = res;

				// address: "河南省郑州市二七区政通路85号"
				// errMsg: "chooseLocation:ok"
				// latitude: 34.72468
				// longitude: 113.6401
				// name: "郑州市二七区人民政府(政通路东)"
			},
			fail: (err) => {
				console.log(err)
			}
		})
	}

	function changeRegion(e) {
		const value = e.detail.value;
		residevice.value = value[0];
		residecity.value = value[1];
		residedist.value = value[2];
	}

	function cityChange(e) {
		console.log(e)
		residevice.value = e.province.label;
		residecity.value = e.city.label;
		residedist.value = e.area.label;
	}

	function sub() {
		if (!name.value.trim().length) return uni.$u.toast('请输入姓名');
		if (!tel.value.trim().length) return uni.$u.toast('请输入手机号');
		if (!residevice.value.trim().length) return uni.$u.toast('请选择所在地区');
		if(!location.value) return uni.$u.toast('请选择所在位置');
		if (!address.value.trim().length) return uni.$u.toast('请输详细地址');
		uni.$post({
			url: '/api/Address/upadress',
			data: {
				did: id.value,
				mobile: tel.value,
				name: name.value,
				residevice: residevice.value,
				residecity: residecity.value,
				residedist: residedist.value,
				address: address.value,
				deadress: deadress.value,
				lat:location.value.latitude,
				lng:location.value.longitude,
				jwdaddress:location.value.address
			}
		}).then(res => {
			uni.$tt(res.msg, 'success');
			uni.$emit('reads')
			uni.$delayBack()
		})
	}
</script>

<style>
	.tbar {
		width: 750rpx;
		height: 20rpx;
		background: #F3F3F3;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.qubox {
		width: 166rpx;
		height: 72rpx;
		background: #F5F6F7;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
</style>